有路网PC端 有路网移动端

免费配套视频教程

教程配套源码资源

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁，可以被翻译为CSS。

在vs code安装less的编译插件

安装插件Easy LESS，如下图所示

有了这个后，可以在编辑器新建less文件，后缀名是.less,保存后会自动编译成css

less可以声明变量，在其它地方直接引用。

将其编译成 CSS 代码如下：

现在我们要切换二者的值，也就是黑色的背景和白色的文本，我们只需要修改两个变量的值就可以了，而不是手动的去修改每个值。

Less 允许我们将常用的样式，打包封装到 class 或 id 选择器中。 其它地方可以方便的引用。

将其转换成 CSS 代码如下

如果只用于样式打包，而不出现在css代码中，那么请在它的后面加上括号：

此时编译成 CSS :

Mixin 另一个比较酷的功能就是它支持传入参数，下面这个例子就为 circle 传入一个指定宽高的参数，默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。

转换成 CSS :

嵌套可用于以与页面的HTML结构相匹配的方式构造样式表，同时减少了冲突的机会。下面是一个无序列表的例子。

编译成 CSS 代码：

就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。

回到 CSS 中来，我们的 li 标签将有白色的文本，如果我们在 ul 标签中声明 @text-color 规则。

编译生成的 CSS 代码如下：

你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

编译成 CSS 如下：

vw是css的一个属性，和px，rem等类似，属于长度单位。

在浏览器中， 1 vw = viewport 的宽度 /100

根据这个特性，vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。

推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。

下面三张图分别是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表现

原理 以设计稿为750为例，假设viewport代表窗口宽度

话不多说 进入官网 https://www.iconfont.cn/ 搜索你想要的 ，比如【我的】

出来以后加入购物车

点击购物车

点击添加至项目 这时你如果没登录的话 ，会让你登陆随便选择一个登陆方式比如 github

登陆成功之后你可以选择新建也可以选择老的项目

确定好之后会是这样一个页面，然后下载至本地

下载后解压会是一些这样的文件

然后像我这样把字体文件和css文件拿到你的项目里

看下效果

html

less

html

css

html

css

html

css

html

css

html

html

css

html

css

html

css

html

html

css

html

css

html

less